<template>
    <view class="container">
        <view>
            <view class="content">
                <u-upload
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    :previewFullImage="true"
                    name="0"
                    multiple
                    :maxCount="9"
                    width="200rpx"
                    height="200rpx"
                    accept="image"
                    uploadIcon="plus"
                    :customStyle="{
                        marginLeft: '20rpx',
                        marginTop: '40rpx',
                    }"
                ></u-upload>
            </view>
        </view>
        <view class="flex_wrap row_between row_middle">
            <view class="save" @click="publish">发布</view>
        </view>
    </view>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig.js";
import { createFile } from "@/api/activity.js";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            fileList: [],
            dataList: [],
            customerId: "",
        };
    },
    onLoad(options) {
        this.customerId = options.customerId;
    },
    computed: { ...mapGetters(["userInfo"]) },
    methods: {
        async publish() {
            if (!this.fileList.length) return uni.$u.toast("请上传照片");
            const fileIds = this.fileList.map((v) => v.fileId);
            const params = {
                unionType: 1001, //关联类型;1001:客户相册,1002:客户个人风采
                fileIds,
                unionId: this.customerId,
            };
            const { data, code } = await createFile(params);
            if (code === 200) {
                uni.$u.toast("成功");
                uni.$emit("currentTab", 3);
                uni.navigateBack({
                    delta: 1,
                });
            }
        },
        async afterRead(event) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileListLen = this.fileList.length;
            lists.map((item) => {
                this.fileList.push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url);
                let item = this.fileList[fileListLen];
                this.fileList.splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: "success",
                        message: "",
                        uploadResult: result.fileUrl,
                        fileId: result.fileId,
                    })
                );
                fileListLen++;
            }
        },
        deletePic(event) {
            this.fileList.splice(event.index, 1);
        },
        async uploadFilePromise(url) {
            const that = this;
            return new Promise((resolve, reject) => {
                const token = uni.getStorageSync("customer_token");
                let a = uni.uploadFile({
                    url: `${baseUrl}/customer/fileOss/uploadFile?type=1001`,
                    filePath: url,
                    header: {
                        "Content-Type": "multipart/form-data",
                        Authorization: `Bearer ${token}` || "",
                    },
                    name: "file",
                    success: (res) => {
                        const result = JSON.parse(res.data);
                        if (result.code === 200) {
                            uni.showToast({
                                title: "上传成功",
                                icon: "success",
                            });
                            setTimeout(() => {
                                resolve(result.data);
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: "上传失败",
                                icon: "fail",
                            });
                            setTimeout(() => {
                                reject(result.msg);
                            }, 1000);
                        }
                    },
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    background-color: #f6f9ff;
    height: 100%;
    padding: 38rpx 36rpx;
    box-sizing: border-box;
    font-weight: 400;
    color: #588bf3;
    font-size: 28rpx;

    .right {
        width: 144rpx;
        height: 60rpx;
        background: #588bf3;
        border-radius: 400rpx 400rpx 400rpx 400rpx;
        color: #ffffff;
        line-height: 60rpx;
        font-size: 32rpx;
        text-align: center;
    }

    .content {
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        margin: 40rpx 0;
    }
}

.wrap {
    padding: 30rpx;
    height: calc(100vh - 88rpx);
    overflow-y: scroll; // 超出滚动
    overscroll-behavior: none; // 禁止滚动溢出
}

.save {
    width: 600rpx;
    height: 90rpx;
    background: #588bf3;
    border-radius: 50rpx;
    line-height: 90rpx;
    color: #fff;
    text-align: center;
    font-size: 36rpx;
    position: fixed;
    left: 10%;
    bottom: 20%;
}
</style>
